<template>
  <el-select v-bind="selectAttrs">
    <el-option v-for="item of items" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts">
import useHttp from '@/hooks/useHttp'

interface Props {
  optionLabel: string
  optionValue: string
  remote: FormGlobal
  options?: FormGlobalSelectField['options']
  selectAttrs: FormGlobalSelectField['attrs']
}

const props = defineProps<Props>()

// const model = defineModel<Record<string, any> | Array<Record<string, any>>>()
// console.log(model.value)

const items = shallowRef<Array<Record<string, any>>>([])

if (props.options) {
  items.value
}

const { request, data } = useHttp<ApiResponseData<Array<Record<string, any>>>>()

onMounted(async () => {
  await request(props.remote.action, props.remote.model, {
    method: props.remote.method
  })

  if (data.value?.status) {
    items.value = [
      ...(props?.options ?? []),
      ...data.value.data.map((o) => ({
        label: o[props.optionLabel],
        value: o[props.optionValue]
      }))
    ]
  }
})
</script>

<style scoped lang="scss"></style>
